<template>
    <div class="goodsItem-contain">
        <el-row>
            <el-col>
                <el-card :body-style="{ padding: '0px' }">
                    <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                         class="image">
                    <div style="padding: 14px;">
                        <span>{{goodsInfo.title}}</span>
                        <div class="bottom clearfix">
                            <time class="time">￥{{ goodsInfo.price }}</time>
                            <el-button type="text" class="button" @click="doAddCart">加入购物车</el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex'
    import * as ACTION from '@/store/modules/cart/actions'

    export default {
        name: "goodsItem",
        props: {
            goodsInfo:{
                type: Object,
                default(){
                    return{}
                },
                required:true
            }
        },
        methods: {
            doAddCart() {
                this.addToCart(this.goodsInfo);
                this.$message({
                    message: '已成功添加到购物车',
                    type: 'success'
                });
            },
            ...mapMutations('cart/', {
                addToCart: ACTION.ADDTOCART,
            })
        }
    }
</script>

<style lang="less">
    .goodsItem-contain {
        .el-row {
            width: 200px;
        }

        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 200px;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }
    }
</style>